<template>
  <div>
    <el-card>
      <!-- 头部搜索框 -->
    <div class="nav">
      <div class="n-left">
      <strong style=" margin-right: 10px;">关键字</strong>
      <el-input style="width:400px" placeholder="根据编号搜索" v-model="value" @change="change = 0"></el-input>
      </div>
    <div class="n-right">
          <el-button @click="remove">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
    </div>

    </div>
    <!-- 数据条数显示 -->
    <el-alert
    type="info"
    style="margin-top: 20px;"
    :closable="false"
    show-icon>
    <span>数据一共{{counts}}条</span>
  </el-alert>
  <!-- 组题列表 -->
  <template>
    <el-table
      v-loading = "loading"
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="190">
      </el-table-column>
      <el-table-column
        label="题型"
    >
    <template v-slot="{row}">
    {{hquestionType(row.questionType) }}
    </template>
      </el-table-column>

        <el-table-column
        label="题目编号"
        width="190">
        <template v-slot="{row}">
            <el-link v-for="(item,index) in row.questionIDs"
            :key="index"
            :underline="false"
            type="primary"
            @click="numbers(item)">{{item.number}}</el-link>
        </template>
        </el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
        width="190">
      </el-table-column>
      <el-table-column
        prop="totalSeconds"
        label="答题时间(s)">
      </el-table-column>
      <el-table-column
        prop="accuracyRate"
        label="正确率(%)">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="录入人">
      </el-table-column>
      <el-table-column
        label="操作">
      <template v-slot="{row}">
        <el-button type="danger" icon="el-icon-delete" circle @click="del(row)"></el-button>
      </template>
      </el-table-column>
    </el-table>
  </template>
  <!-- 分页 -->
  <el-pagination
      class="pagination"
      background
      @size-change="heSizeChange"
      @current-change="hCurrentChange"
      :current-page="q.page"
      :page-size="q.pagesize"
      layout="  prev, pager, next,sizes, jumper"
      :total="counts"
      :page-sizes="[10, 20, 30, 40]"
      >
    </el-pagination>
    </el-card>
    <!-- 题目编号弹窗 -->
    <el-dialog
    title="题目预览"
    :visible.sync="dialogVisible"
    width="65%"
    >
  <quest v-if="dialogVisible" :id="cuid" @close="dialogVisible = false"></quest>
</el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType, difficulty } from '../../api/hmmm/constants.js'
import quest from '../components/questions-preview.vue'
// 题型
const gquestionType = {}
questionType.forEach(item => {
  gquestionType[item.value] = item.label
})
// 难度
const gdifficulty = {}
difficulty.forEach(item => {
  gdifficulty[item.value] = item.label
})
export default {
  components: {
    quest
  },
  data () {
    return {
      change: 0,
      loading: false,
      cuid: 0,
      gg: [],
      dialogVisible: false,
      list: [], // 接收的组题列表数据
      counts: 0, // 总条数
      q: {
        page: 1,
        pagesize: 20
      },
      value: ''
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    // 组题列表请求
    async randoms () {
      this.loading = true
      try {
        let res = null
        if (this.change === 1) {
          res = await randoms({ ...this.q, keyword: this.value })
        } else {
          res = await randoms({ ...this.q })
        }
        // console.log(res)
        this.list = res.data.items
        this.counts = res.data.counts
        // console.log(this.questionIDs)
        this.loading = false
      } catch (e) {
        console.log(e)
      }
    },
    // 删除
    async  del (row) {
      // console.log(row)
      const res = await this.$confirm('真的要删除吗？', '提示', { type: 'warning' }).catch(e => e)
      if (res !== 'confirm') return
      try {
        await removeRandoms(row)
        if (this.list.length === 1 && this.q.page > 1) {
          this.q.page--
        }
        this.randoms()
        this.$message.success('删除成功')
        // console.log(res)
      } catch (e) {
        console.log(e)
      }
    },
    heSizeChange (size) {
      this.q.pagesize = size
      this.randoms()
    },
    hCurrentChange (page) {
      this.q.page = page
      this.randoms()
    },
    // 搜索
    search () {
      this.q.page = 1
      this.change = 1
      this.randoms()
      // console.log(this.value)
    },
    // 弹框
    async numbers (row) {
      // console.log(row.id)
      this.dialogVisible = true
      this.cuid = row.id

      // console.log(row)
    },
    // 映射题型
    hquestionType (code) {
      // console.log(code)
      return gquestionType[code]
    },
    // 映射难度
    hdifficulty (code) {
      // console.log(code)
      return gdifficulty[code]
    },
    // 清除
    remove () {
      this.value = ''
      this.randoms()
    }
  }
}
</script>

<style scoped>
.nav{
  display: flex;
  justify-content: space-between;
}
.pagination{
margin-top: 20px;
padding-bottom: 20px;
float: right;
}
.butt{
  margin-left: 800px;
}
</style>
